<template>
  <div class="content-info-yj">
    <LabelTitle text="紧急事件" :showImg="false"></LabelTitle>
    <div class="rightbtn" @click="seeAllData">查看全部事件 ></div>
    <div class="content-box mt10">
      <div class="event-box">
        <template v-if="eventlist.length > 0">
          <div
            class="event-item"
            :class="{
              l1: item.eventClass === '重点',
              l2: item.eventClass === '紧急',
            }"
            v-for="(item, index) in eventlist"
            :key="index"
            @click.stop="seedetail(item)"
          >
            <img
              class="img"
              :src="item.pic ? item.pic : '../../../assets/images/zdjy.png'"
            />
            <div class="rightinfo">
              <div class="title-box">
                <span
                  class="title"
                  :style="{
                    color:
                      item.eventClass === '紧急'
                        ? '#bf8522'
                        : item.eventClass === '重点'
                        ? '#e70909'
                        : '#2263bf',
                  }"
                  >{{ item.eventName || "--" }}</span
                >
              </div>
              <p class="text exlipse mt10" :title="item.eventTime">
                时间：{{ item.eventTime }}
              </p>
              <p class="text exlipse mt10" :title="item.address">
                地址：{{ item.address || "--" }}
              </p>
            </div>
          </div>
        </template>
        <div v-else class="no-data">
          <img src="../../../assets/images/empty.png" alt="暂无数据" />
          <p>暂无数据</p>
        </div>
      </div>
    </div>
    <SelfDialog
      :dialogVisable="dialogVisable"
      :height="leaderList.indexOf(UserId) > -1 ? '320px' : '474px'"
      :title="leaderList.indexOf(UserId) > -1 ? '指派' : '事件处置'"
      @close="close"
      @confirm="confirm"
    >
      <template #default>
        <div class="center_content-pf" style="padding: 20px 25px">
          <el-form
            v-if="leaderList.indexOf(UserId) > -1"
            ref="ruleFormRef"
            :model="formValue"
            label-width="auto"
            class="ruleForm"
          >
            <el-form-item label="派发处置人员" prop="assignedMemberId">
              <el-select
                v-model="formValue.assignedMemberId"
                placeholder="请选择"
                style="min-width: 120px"
                clearable
                filterable
              >
                <el-option
                  v-for="item in typeState.czry"
                  :key="item.memberId"
                  :label="item.memberName"
                  :value="item.memberId"
                />
              </el-select>
            </el-form-item>
          </el-form>
          <cz ref="czref" v-else></cz>
        </div>
      </template>
    </SelfDialog>
  </div>
</template>

<script setup>
import { ElMessage, ElNotification } from "element-plus";
import LabelTitle from "@/components/labeltitle.vue";
import { useUserStore } from "@/pinia/user.js";
const piniaUser = useUserStore();
import { TabbarList } from "@/pinia/tabbar.js";
let piniaTab = TabbarList();
import SelfDialog from "@/components/dialog/dialog.vue";
import cz from "@/components/event/cz.vue";
import { TypeMin } from "@/utils/type.js";
import { onMounted } from "vue";
import { getzxsjdbList, dispatchEvent, completeEvent } from "@/api/event.js";
const { typeState } = TypeMin();
const UserId = localStorage.getItem("User");
// 需要根据权限判断是否显示
//领导是数组list 科员队员的数组list
const leaderList = [
  "1903999283762434048",
  "1903999283762434049",
  "1903999283766628353",
  "1903999283766628355",
];
let eventlist = ref([]);

const getData = async () => {
  try {
    let { data } = await getzxsjdbList({
      eventStatus: "10", //待处理事件
      eventClass: "301", //查紧急事件
      // eventCodePrefix: "9001", //预警事件----变成了紧急事件
    });
    eventlist.value = data.busizEventList;
  } catch (e) {
    console.error(e);
  }
};

const seedetail = (row) => {
  piniaTab.add({
    name: "处置详情",
    path: "/czdetail",
    icon: "",
    query: {
      busizEventId: row.busizEventId,
    },
    meta: {
      hidden: false,
      title: "",
    },
  });
};

function seeAllData() {
  console.log("查看全部数据");
  // router.push("/eventlist");
  piniaTab.add({
    name: "事件处置",
    path: "/eventhandling",
    icon: "",
    query: {
      eventClass: "301",
    },
    meta: {
      hidden: false,
      title: "",
    },
  });
}

let formValue = ref({
  assignedMemberId: "",
});
// 处置
let dialogVisable = ref(false);
let deletList = ref([]);
let currentType = ref("");
const changeRow = (value, type) => {
  try {
    currentType.value = type;
    if (type == "pf") {
      formValue.value.assignedMemberId = "";
    }
    formValue.value.busizEventId = value;
    dialogVisable.value = true;
    deletList.value = value;
  } catch (e) {
    console.error(e);
  }
};

// 取消分派
const close = () => {
  dialogVisable.value = false;
};

let czref = ref();
// 确认分派
const confirm = async () => {
  try {
    if (currentType.value == "pf") {
      if (!formValue.value.assignedMemberId) {
        ElMessage.error("请选择派发处置人员");
        return;
      }
      let { data } = await dispatchEvent({
        ...formValue.value,
      });
      console.log(formValue.value);
      getData();
      dialogVisable.value = false;
    } else {
      let info = czref.value.getValue();
      let { data } = await completeEvent({
        ...info,
        busizEventId: formValue.value.busizEventId,
      });
      console.log({
        ...info,
        busizEventId: formValue.value.busizEventId,
      });
      dialogVisable.value = false;
    }
  } catch (e) {
    console.error(e);
  }
};

let webSocket = null;
let notification = null;
function clintWebsoket() {
  if (webSocket) {
    webSocket.close();
  }
  let str =
    process.env.NODE_ENV === "production"
      ? `wss://${
          window.location.host
        }/integrated-workbench/imserver/${localStorage.getItem("userId")}`
      : `ws://192.168.1.135:8085/integrated-workbench/imserver/${localStorage.getItem(
          "userId"
        )}`;
  // `ws://192.168.1.100:8085/enforcement/imserver/${piniaUser.user.memberId}`;
  webSocket = new WebSocket(str);
  webSocket.onopen = function (e) {
    console.log("websoket连接成功");
    // start(webSocket) //开启心跳
  };
  webSocket.onmessage = async (e) => {
    if (e.data == "WebSocket连接成功！") return;
    let data = JSON.parse(e.data);
    // ElNotification.close();
    ElNotification.closeAll();
    ElNotification({
      title: "新待办",
      message: "您有一条新的待办信息，请注意查收！",
      duration: 0,
    });

    getData();
  };
  webSocket.onerror = () => {
    // setTimeout(() => {
    //   clintWebsoket();
    // }, 60 * 1000);
    console.error("websoket断了");
  };
  webSocket.onclose = () => {
    // setTimeout(() => {
    //   clintWebsoket();
    // }, 60 * 1000);
    console.error("websoket关闭了");
  };
}

onMounted(() => {
  getData();
  // clintWebsoket();
});

onUnmounted(() => {
  if (webSocket) {
    webSocket.close();
  }
});
</script>

<style lang="scss" scoped>
.content-info-yj {
  margin-top: 15px;
  width: 30%;
  height: 500px;
  // width: 400px;
  // width: calc(33% - 10px);
  // height: 100%;
  // height: calc(100% - 470px);
  position: relative;
  margin-right: 15px;
  overflow: hidden;
  .rightbtn {
    position: absolute;
    right: 16px;
    top: 2px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 14px;
    color: #2263bf;
    line-height: 20px;
    cursor: pointer;
  }
  .content-box {
    height: calc(100% - 40px);
    // height: 378px;
    // margin-top: 15px;
    padding: 15px;
    background: #ffffff;
    box-shadow: 0px 0px 20px 0px rgba(70, 102, 149, 0.06);
    border-radius: 15px;

    .event-box {
      width: 100%;
      height: 100%;
      overflow: auto;
      overflow-x: hidden;
      .event-item {
        margin-bottom: 10px;
        width: 100%;
        height: 116px;
        padding: 14px;
        background: rgba(34, 99, 191, 0.06);
        box-shadow: 0px 0px 20px 0px rgba(70, 102, 149, 0.06);
        border-radius: 12px;
        display: flex;
        align-items: center;
        cursor: pointer;
        border: 1px solid rgba(44, 132, 255, 0.22);
        &.l1 {
          border: 1px solid #ffe9d1;
          background: #fdf4e1;
          .title {
            color: #bf8522 !important;
          }
        }
        &.l2 {
          .title {
            color: #e70909 !important;
          }
          background: #ffeded;
          border: 1px solid #ffd0d0;
        }
        .img {
          width: 140px;
          height: 88px;
          border-radius: 4px;
          margin-right: 13px;
        }
        .rightinfo {
          flex: 1;
          // width: calc(100% - 160px);
          .title-box {
            display: flex;
            align-items: center;
            position: relative;
            .title {
              font-family: PingFangSC, PingFang SC;
              font-weight: 500;
              font-size: 14px;
              color: #2263bf;
              line-height: 20px;
            }
            .tip {
              font-size: 12px;
              color: #45aff7;
              width: 42px;
              height: 24px;
              border-radius: 4px;
              background: #d2f0ff;
              border: 1px solid #a5dcff;
              text-align: center;
              line-height: 24px;
              margin: 0 12px;
              &.red {
                background: #ffd2d2;
                color: #da5a5a;
                border: 1px solid #ffa5a5;
              }
              &.green {
                background: #cbfff2;
                border: 1px solid #72d1c0;
                color: #39aa92;
              }
              &.org {
                background: #ffe9d2;
                color: #ff982b;
                border: 1px solid #ffbe7c;
              }
            }
            .tiltebtnr {
              position: absolute;
              right: 30px;
              top: 0px;
              min-width: 38px;
              height: 26px;
              background: #2263bf;
              border-radius: 4px;
              font-size: 12px;
              color: #ffffff;
              line-height: 26px;
              cursor: pointer;
              text-align: center;
            }
          }
          .text {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #999999;
            line-height: 20px;
            white-space: normal; // 允许换行
            word-wrap: break-word; // 确保单词在必要时换行
            overflow: auto; // 如果文本内容超出容器高度，显示滚动条
            max-height: 40px; // 设置最大高度，根据需要调整
          }
        }
      }
      .no-data {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        padding: 20px;
        .text {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #999999;
          line-height: 20px;
        }
        img {
          width: 100px; // 根据需要调整图片宽度
          height: 100px; // 根据需要调整图片高度
          margin-top: 15px;
        }
      }
    }
  }
}
</style>
